<template>
  <section class="index-pos text-white position-fixed w-100 h-100">
    <div class="data-center" @click="goTo('/resource')"></div>
    <div class="assist-analyse" @click="goTo('/assist')"></div>
    <div class="system" @click="goTo('/system')"></div>
  </section>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goTo = (index: string) => {
  router.push(index);
};
</script>
<style lang="scss" scoped>
.index-pos {
  left: 0;
  top: 0;
  background: url('./../assets/bg.png') no-repeat;
  background-size: cover;
}
.map {
  position: absolute;
}
.data-center {
  width: 261px;
  height: 365px;
  position: absolute;
  left: 14%;
  top: 27%;
  cursor: pointer;
}
.assist-analyse {
  width: 261px;
  height: 365px;
  position: absolute;
  left: 44%;
  bottom: 10px;
  cursor: pointer;
}

.system {
  width: 261px;
  height: 365px;
  position: absolute;
  left: 74%;
  top: 22%;
  cursor: pointer;
}
</style>
